<template>
  <el-row class="flex-1 flex-column overflow-hidden">
    <div class="flex-1 overflow-hidden">
      <el-table
        :data="data.data"
        :stripe="data.config.stripe"
        :border="data.config.border"
        :style="{ width: data.config.width }"
        class="table"
        v-bind="$attrs"
        row-key="uuid"
        :show-summary="data.config.showSummary"
        :empty-text="data.config.emptyText || '暂无数据'"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :header-cell-style="{ background: '#EEF4FF', color: '#333333' }"
        :height="data.config.height"
        v-on="$listeners"
      >
        <el-table-column
          v-if="data.config.selection"
          type="selection"
          :selectable="data.config.selectable"
          width="55"
        />
        <el-table-column
          v-if="data.config.index"
          label="序号"
          width="80px"
          class-name="index-style"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in data.columns">
          <!-- key  -->
          <el-table-column
            v-if="item.width !== 0"
            :key="item.label"
            :class-name="item.className"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :sortable="item.sortable"
            :min-width="item.minWidth"
            :align="item.align"
            :fixed="item.fixed"
            :formatter="item.formatter"
            :show-overflow-tooltip="!item.wordsWrap"
          >
            <template slot-scope="scope">
              <slot
                v-if="item.slot"
                :name="item.slotName || item.prop"
                :info="{
                  $index: scope.$index,
                  row: scope.row,
                  column: scope.column,
                }"
              />
              <template v-else>
                {{
                  item.formatter
                    ? item.formatter(
                      scope.row,
                      scope.column,
                      scope.row[scope.column.property]
                    )
                    : scope.row[scope.column.property]
                }}
              </template>
            </template>
            <template v-for="(i, index) in item.children">
              <template v-if="item.children">
                <el-table-column
                  :key="index"
                  :class-name="i.className"
                  :prop="i.prop"
                  :label="i.label"
                  :width="i.width"
                  :sortable="item.sortable"
                  :min-width="i.minWidth"
                  :align="i.align"
                  :fixed="i.fixed"
                  :formatter="i.formatter"
                  :show-overflow-tooltip="true"
                >
                  <!-- <template slot-scope="scope">
                    <slot v-if="i.slot" :name=" i.slotName || i.prop" :info="{$index: scope.$index, row: scope.row, column:scope.column}" />
                    <template v-else>
                      {{ scope.row[scope.column.property ] }}
                    </template>
                  </template> -->
                </el-table-column>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <Pagination
      v-if="!data.config.hidPagination"
      :page-data="pageData"
      :page-config="data.pageConfig"
      @pagination="handlePagination"
    />
  </el-row>
</template>
<script>
import Pagination from './components/pagination';

export default {
  name: 'Table',
  components: {
    Pagination
  },
  filters: {
    empty(value) {
      if (!value || value === '' || value === 0) return '无';
      return value;
    }
  },
  model: {
    prop: 'pageData',
    event: 'pagination'
  },
  props: {
    pageData: {
      type: Object,
      default: function () {
        return {
          total: 20,
          page: 1,
          pageSize: 20
        };
      }
    },
    tableData: {
      type: Object,
      default: function () {
        return {
          config: {
            // 表格配置
            stripe: false, // 是否为斑马纹表格
            border: false, // 是否显示表格边框
            height: '100%', // 表格高度
            width: '100%', // 表格宽度
            index: false // 是否显示序号
          },
          columns: [], // 表格列配置
          data: [], // 表格数据
          pageConfig: {} // 分页配置
        };
      }
    }
  },
  data() {
    return {
      // height: document.body.clientHeight
    };
  },
  computed: {
    data() {
      const {
        config = {},
        columns = [],
        data = [],
        pageConfig = {}
      } = this.tableData; // eslint-disable-line
      const configKeys = Object.keys(config);
      if (!configKeys.includes('stripe')) config.stripe = false;
      if (!configKeys.includes('border')) config.border = false;
      if (!configKeys.includes('index')) config.index = true;
      if (!configKeys.includes('height')) config.height = '100%';
      if (!configKeys.includes('width')) config.width = '100%';
      return {
        config,
        columns,
        data,
        pageConfig
      };
    }
  },
  methods: {
    handlePagination(e) {
      this.$emit('pagination', e);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .index-style .cell {
  text-align: center !important;
}

// 解决table底部栏 线的样式
.el-table::before {
  height: 0px !important;
}
</style>
